<template>
<keep-alive>
  <div>
    <BorderTitle class="recommendSong">推荐歌单</BorderTitle>
    <ul class="songlist" v-if="songList.length > 0">
      <ListItem v-for="sl in songList" :key="sl.id" :item="sl"></ListItem>
    </ul>
    <Loading v-if="songList.length == 0"></Loading>

    <BorderTitle class="newList">最新音乐</BorderTitle>
    <ul class="newsong" v-if="newSong.length > 0">
      <li v-for="s in newSong" :key="s.id">
        <SongItem :item="s" @add-list="addMusicList(newSong)"></SongItem>
      </li>
    </ul>
    <div class="footer">
    </div>
    <Loading v-if="songList.length == 0"></Loading>
  </div>
  </keep-alive>
</template>
<script>
import BorderTitle from "@/components/BorderTitle";
import ListItem from "@/components/ListItem";
import SongItem from "@/components/SongItem";
import Loading from "@/components/Loading";
export default {
  name: "Recommend",
  components: {
    BorderTitle,
    ListItem,
    SongItem,
    Loading,
  },
  data() {
    return {
      songList: [],
      newSong: [],
    };
  },
  methods: {
    addMusicList(newSong) {
      let newArr = this.$root.musicStore.musicList;
      newSong.map((d) => {
        let find = false;
        for (let n of newArr) {
          if (n.id == d.id) {
            find = true;
            break;
          }
        }
        if (!find) newArr.push(d);
      });
      this.$root.musicStore.musicList = newArr;
    },
  },
  created() {
    this.axios
      .get("/personalized?limit=9")
      .then((data) => {
        this.songList = data.data.result;
      })
      .catch((err) => {
        console.log(err);
      });
    this.axios.get("/personalized/newsong").then((data) => {
      this.newSong = data.data.result;
    });
  },
};
</script>
<style lang="less" scoped>
.recommendSong {
  font-size: 17px;
  margin: 10px 0px;
}
.songlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  li {
    width: 33%;
  }
}
.newList {
  margin-top: 20px;
  font-size: 17px;
}
.footer {
  height: 64px;
  width: 100vw;
}
/deep/.playbtn {
  margin-right: 8px;
}
/deep/.left {
  margin-left: 8px;
}
</style>